<!DOCTYPE HTML>
<html>

<head>
    <title>店铺等级添加功能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
    <!--ztree-->
    <link rel="stylesheet" href="../../../assets/tools/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <style>
        .ztree li span.button.roots_open, .ztree li span.button.bottom_open, .ztree li span.button.bottom_close, .ztree li span.button.center_docu, .ztree li span.button.bottom_docu {
            -webkit-box-shadow：none;
            box-shadow: none;
        }

        .ztree li a.curSelectedNode {
            height: 30px;
        }

        .ztree li span.button:hover, .button-hover {

            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            transition: none;
        }

        .ztree * {
            font-size: 16px;
        }

        .ztree {
            margin-left: 100px;
        }

        .ztree li {
            line-height: 30px;
        }

        .ztree li span {
            line-height: 25px;
            margin-right: 2px;
        }

        .ztree li a.operation {
            padding: 0px 10px 0px 10px;
            margin: 0;
            cursor: pointer;
            height: 21px;
            font-size: 14px;
            color: #36c;
            text-decoration: underline;
            vertical-align: top;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>添加功能
                <button type="button" id="back-btn" class="pull-right jx-btn btn-positive btn-large">取消</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <h3><label class="control-label offset2">等级名称：普通版</label></h3>
                <ul id="treeView" class="ztree"></ul>
                <div class="actions-bar">
                    <div class="row">
                        <div class="span12 offset10 ">
                            <button type="button" id="submit-btn" class="jx-btn btn-default btn-large">确定</button>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<!--ztree-->
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../assets/tools/ztree/js/jquery.ztree.exedit.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
    $(function () {
        //关闭当前页
        $("#back-btn").click(function () {
            top.topManager.closePage();
        })
    });
</script>
<!-- script start -->
<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check: {enable: true},//可勾线
        chkboxType: {"Y": "ps", "N": "ps"},//选中取消时父子关系
        view: {selectedMulti: false, showIcon: false}
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        {
            name: "SunTech",
            open: true,
            children: [
                {
                    id: "1",
                    name: "品牌管理",
                    open: true,
                    children: [
                        {id: "11", name: "品牌管理—编辑折扣", checked: true},
                        {id: "12", name: '品牌管理—品牌上下架'}]
                },
            ]
        }, {
            id: "2", name: "员工", checked: true
        }, {
            id: "3", name: "订单"
        }

    ];
    //获取选中的
    function getNodes() {
        var zTree = $.fn.zTree.getZTreeObj("treeView");
        return zTree.getCheckedNodes(true);
    }
    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#treeView"), setting, zNodes);
        $("#submit-btn").click(function () {
            var obj = getNodes();
            console.log(obj);
        });
    });
</SCRIPT>
<!-- script end -->

<body>

</html>
